<template>
  <div class="care">
    <!-- <child @func="getMsgFormSon"></child> -->
    <div class="care_top">
      <div class="care_go_back" @click="back"></div>
      <div class="care_name"></div>
      <div class="care_all" @click="choose" v-text="text"></div>
      <div class="wrap" v-if="cate">
        <div class="trile1"></div>
        <ul>
          <li @click="typer(0,'全部')">全部</li>
          <li @click="typer(1,'返佣')">返佣</li>
          <li @click="typer(2,'提现')">提现</li>
          <li @click="typer(3,'奖励')">奖励</li>
          <li @click="typer(4,'红包')">红包</li>
        </ul>
      </div>
    </div>
    <div class="care_menu">
      <div class="care_moth" @click="showPicker0">
        {{filter}}
        <span></span>
      </div>
      <div class="care_money">
        <div class="withdraw">支出¥{{good.consume_amount}}</div>
        <div class="income">收入¥{{good.earn_amount}}</div>
      </div>
    </div>
    <div class="care_list">
      <ul>
        <li v-for="(item, index) in goods" :key="index" @click="goPart(item.status,index)">
          <div class="care_left">
            <img :src="item.logo" />
          </div>
          <div class="care_right">
            <div class="care_info">
              <div class="care_name" v-text="item.title"></div>
              <div>{{item.intro}}</div>
              <div class="care_time">
                {{item.create_time}}
                <!-- <span :class="rule[item.type].class">{{rule[item.type].title}}</span> -->
              </div>
            </div>
            <div :class="[item.action===1?'add':'cut']">{{item.action===1?'+':'-'}}{{item.amount}}</div>
          </div>
        </li>
        <div class="nohave" v-if="nohave">当前日期还没有明细记录哦！</div>
        <!-- <li>
                    <div class="care_left">
                        <img src="//img.alicdn.com/imgextra/i4/3217234153/O1CN01NAsxRm1gY7MmcupzR_!!3217234153.jpg">
                    </div>
                    <div class="care_right">                       
                        <div class="care_info">
                            <div class="care_name">美妆店铺旗舰店</div>
                            <div class="care_time">06-03 20:08 <span class="statec">提现成功</span></div>
                        </div>
                        <div class="care_num  cut">+1.99</div>
                    </div>
                </li>        
                 <li>
                    <div class="care_left">
                        <img src="//img.alicdn.com/imgextra/i4/3217234153/O1CN01NAsxRm1gY7MmcupzR_!!3217234153.jpg">
                    </div>
                    <div class="care_right">                       
                        <div class="care_info">
                            <div class="care_name">美妆店铺旗舰店</div>
                            <div class="care_time">06-03 20:08 <span class="stateb">提现失败</span></div>
                        </div>
                        <div class="care_num  add">+1.99</div>
                    </div>
        </li>-->
      </ul>
      <div v-if="load" class="loader">正在加载中...</div>
      <div v-if="bottom" class="bottom">已经到底啦</div>
    </div>
    <awesome-picker
      ref="picker0"
      :data="picker0.data"
      :textTitle="picker0.textTitle"
      :anchor="picker0.anchor"
      @todo="msg1"
      @confirm="handlePicker0Confirm"
    ></awesome-picker>
    <awesome-picker
      ref="picker"
      :textTitle="picker.textTitle"
      :type="time"
      @todo="msg2"
      @confirm="handlePickerConfirm"
    ></awesome-picker>
    <div class="contain" v-if="contain" @click="close"></div>
  </div>
</template>
<script>
//import child  from  './vue-awesome-picker.vue'
const data1 = [
  "2016年",
  "2017年",
  "2018年",
  "2019年",
  "2020年",
  "2021年",
  "2022年",
  "2023年",
  "2024年",
  "2025年",
  "2026年",
  "2027年",
  "2028年",
  "2029年",
  "2030年"
];
const data2 = [
  "1月",
  "2月",
  "3月",
  "4月",
  "5月",
  "6月",
  "7月",
  "8月",
  "9月",
  "10月",
  "11月",
  "12月"
];
export default {
  name: "Care",
  data() {
    return {
      titleText: "",
      text: "全部",
      time: "date",
      disabled: "",
      filter: "本月",
      cate: false,
      contain: false,
      page: 1,
      limit: 10,
      token: "",
      good: "",
      goods: "", //数据
      minu: "", //列表
      kind: 0, //支出情况
      type: 2, //按月还是日查询
      load: false,
      bottom: false,
      nohave: false,
      picker0: {
        anchor: [],
        textTitle: "按月选择",
        data: [data1, data2]
      },
      picker: {
        anchor: [],
        textTitle: "按日选择"
      },
      rule: [
        { type: "add", class: "statea", title: "提现中", coin: "-" },
        { type: "add", class: "statea", title: "提现中", coin: "-" },
        { type: "cut", class: "stateb", title: "提现失败", coin: "+" },
        { type: "add", class: "statec", title: "提现成功", coin: "-" }
      ]
    };
  },
  created() {
    document.title = "订单流水";
    if (localStorage.token) {
      this.token = localStorage.getItem("token");
    } else {
      this.$router.push({ path: "/login" });
    }
    var nowDate = new Date();
    let date = {
      year: nowDate.getFullYear(),
      month: nowDate.getMonth() + 1
    };
    this.minu = date.year + "-" + date.month;
    this.getData();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    showPicker0() {
      this.$refs.picker0.show();
    },
    //按月查询
    handlePicker0Confirm(v) {
      var year = v[0].value.substr(0, v[0].value.length - 1);
      var month = v[1].value.substr(0, v[1].value.length - 1);
      this.filter = year + "-" + month;
      this.minu = year + "-" + month;
      this.type = 2;
      this.page = 1;
      this.load = false;
      this.bottom = false;
      this.nohave = false;
      this.getData();
    },
    showPicker() {
      this.$refs.picker.show();
      // var hdiv=document.getElementsByTagName('h4')[0];

      // hdiv.setAttribute("v-on:click","blurTodo");
    },
    //按日查询
    handlePickerConfirm(data) {
      var year = data[0].value.substr(0, data[0].value.length - 1);
      var month = data[1].value.substr(0, data[1].value.length - 1);
      var date = data[2].value.substr(0, data[2].value.length - 1);
      this.filter = year + "-" + month + "-" + date;
      this.minu = year + "-" + month + "-" + date;
      this.type = 1;
      this.page = 1;
      this.load = false;
      this.bottom = false;
      this.nohave = false;
      this.getData();
    },
    msg1(data) {
      //    if(data){
      this.$refs.picker0.hide();
      this.$refs.picker.show();

      //    }else{
      //        this.$refs.picker0.show();
      //        this.$refs.picker.hide();
      //    }
    },
    msg2(data) {
      this.$refs.picker.hide();
      this.$refs.picker0.show();
    },
    choose() {
      this.cate = true;
      this.contain = true;
    },
    close() {
      this.contain = false;
      this.cate = false;
    },
    typer(e, f) {
      this.cate = false;
      this.contain = false;
      this.text = f;
      this.page = 1;
      this.load = false;
      this.bottom = false;
      this.nohave = false;
      this.kind = e;
      this.getData();
    },
    scroll(goods) {
      let flag = false;
      window.onscroll = () => {
        let top = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条在Y轴上的滚动距离
        let vh =
          document.compatMode == "CSS1Compat"
            ? document.documentElement.clientHeight
            : document.body.clientHeight; // 浏览器视口的高度
        let height = Math.max(
          document.body.scrollHeight,
          document.documentElement.scrollHeight
        ); // 文档的总高度
        let bottomOfWindow = top + vh >= height;
        if (bottomOfWindow && flag == false) {
          flag = true;
          this.page++;
          var that = this;
          that.load = true;
          var params = {
            page: that.page,
            limit: that.limit,
            time: that.minu,
            type: that.kind,
            time_type: this.type
          };
          this.$axios
            .get(
              //传参发起请求
              "/v1/user/walletLogList",
              {
                params,
                headers: {
                  "Content-Type":
                    "application/x-www-form-urlencoded;charset=UTF-8",
                  Authorization: "bearer " + this.token
                }
              }
            )
            .then(
              function(response) {
                //接口返回数据
                var data = response.data.data.list;
                if (data.length <= 0) {
                  that.bottom = true;
                  that.load = false;
                } else {
                  for (var i = 0; i < data.length; i++) {
                    goods.push(data[i]);
                  }
                  that.load = false;
                  flag = false;
                }
              },
              response => {
                console.log("error");
              }
            );
        }
      };
    },
    getData() {
      this.$axios
        .get("/v1/user/walletLogList", {
          params: {
            time: this.minu,
            page: this.page,
            limit: this.limit,
            type: this.kind,
            time_type: this.type
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
            Authorization: "bearer " + this.token
          }
        })
        .then(
          res => {
            if (res.data.code == 200) {
              var data = res.data.data;
              this.good = data;
              this.goods = data.list;

              if (data.list.length <= 0) {
                this.nohave = true;
              }
              this.scroll(this.goods);
            } else if (res.data.code == 10000) {
              Toast(res.data.msg);
              this.$router.push({ path: "/login" });
            } else {
              Toast(res.data.msg);
            }
            this.scroll(this.goods);
          },
          res => {
            console.log("error");
          }
        );
    },
    goPart(e, f) {
      if (e == 2) {
        this.$router.push({
          path: "/bill",
          query: {
            remark: this.goods[f].remark,
            amount: this.goods[f].amount,
            helped: this.goods[f].helped,
            real_name: this.goods[f].real_name,
            head_pic: this.goods[f].head_pic,
            id: this.goods[f].id
          }
        });
      }
    }
  }

  // components:{
  //     child,
  // },
};
</script>
<style scoped>
.care_top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 698px;
  margin: 0 auto;
  height: 70px;
  padding-top: 30px;
}
.care_top .care_go_back {
  width: 48px;
  height: 48px;
  background: url(/static/images/team_go_back.png) no-repeat center center;
  background-size: 100% 100%;
}
.care_top .care_name {
  font-size: 34px;
  color: #333334;
  font-weight: 600;
}
.care_top .care_search {
  width: 48px;
  height: 48px;
  background: url(/static/images/care.png) no-repeat center center;
  background-size: 100% 100%;
}
.care_top .care_all {
  font-size: 28px;
  color: #4a4a4a;
  line-height: 48px;
  position: relative;
}
.care_menu {
  height: 200px;
  background: #f8f8f8;
  display: flex;
  justify-content: space-between;
}
.care_menu .care_moth {
  padding: 0 18px;
  height: 56px;
  border-radius: 30px;
  line-height: 56px;
  background: #fff;
  text-align: center;
  font-size: 28px;
  color: #4a4a4a;
  margin-top: 34px;
  margin-left: 26px;
}
.care_menu .care_moth span {
  width: 28px;
  height: 28px;
  display: inline-block;
  background: url(/static/images/now.png) no-repeat center center;
  background-size: 100% 100%;
  margin-left: 8px;
}
.care_menu .care_money {
  color: #9b9b9b;
  font-size: 28px;
  margin-right: 26px;
  text-align: right;
}
.care_menu .care_money .withdraw {
  line-height: 46px;
  margin-top: 18px;
}
.care_list {
  width: 100%;
  border-radius: 80px 80px 0 0;
  margin-top: -80px;
  background: #fff;
}
.care_list li {
  display: flex;
  justify-content: space-between;
  width: 698px;
  /* height: 180px; */
  margin: 0 auto;
  /* line-height: 180px; */
  align-items: center;
  /* vertical-align: middle; */
}
.care_list li .care_left {
  width: 80px;
  height: 80px;
}
.care_list li .care_left img {
  width: 100%;
  border-radius: 50%;
  /* vertical-align: middle; */
}
.care_list li .care_right {
  width: 598px;
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #f2f2f2;
  align-items: center;
  padding: 20px 0;
}
.care_right .care_name {
  color: #333333;
  font-size: 28px;
  font-weight: bold;
  /* padding-top: 20px; */
}
.care_right .care_time {
  font-size: 28px;
  color: #9b9b9b;
}
.care_right .care_time span {
  font-size: 24px;
  color: #fff;
  padding: 4px 16px;
  border-radius: 36px 36px 36px 0px;
  margin-left: 28px;
}
.care_right .care_time .statea {
  background: #fe3b30;
}
.care_right .care_time .stateb {
  background: #333334;
}
.care_right .care_time .statec {
  background: #e4e4e4;
}
.care_info {
  line-height: 56px;
  /* margin-top: 40px; */
}
.care_right .add {
  color: #fe3b30;
  font-size: 40px;
}
.care_right .cut {
  color: #89c149;
  font-size: 40px;
}
.wrap {
  position: absolute;
  background-color: #474747;
  width: 180px;
  border-radius: 8px;
  z-index: 99;
  right: 24px;
  top: 116px;
}
.trile1 {
  display: block;
  position: absolute;
  width: 0px;
  height: 0px;
  border: 12px solid transparent;
  border-bottom-color: #474747;
  top: -24px;
  left: 120px;
}
.wrap ul {
  width: 160px;
  margin: 0 auto;
}
.wrap li {
  line-height: 80px;
  font-size: 28px;
  color: #fff;
  border-bottom: 2px solid #fff;
  text-align: center;
}
.wrap li:last-child {
  border-bottom: none;
}
.contain {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #989898;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.3;
}
.loader {
  font-size: 24px;
  line-height: 80px;
  text-align: center;
  width: 100%;
}
.bottom {
  font-size: 24px;
  line-height: 80px;
  text-align: center;
  width: 100%;
}
.nohave {
  font-size: 24px;
  line-height: 80px;
  text-align: center;
  width: 100%;
  padding-top: 40px;
}
</style>